<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <script type="text/javascript" src="../lib/three.js"></script>

        <script type="text/javascript">
            var scene = null;
            var camera = null;
            var renderer = null;

            var cube = null;
            var alpha = 0;

            function init() {
                renderer = new THREE.WebGLRenderer();
                renderer.setSize(400, 300);

                var container = document.getElementById('canvas');
                container.appendChild(renderer.domElement);
                renderer.shadowMapEnabled = true;

                scene = new THREE.Scene();

                camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
                camera.position.set(5, 15, 25);
                camera.lookAt(new THREE.Vector3(0, 0, 0));
                scene.add(camera);

                var plane = new THREE.Mesh(new THREE.PlaneGeometry(8, 8, 16, 16),
                        new THREE.MeshLambertMaterial({color: 0xcccccc}));
                plane.rotation.x = -Math.PI / 2;
                plane.position.y = -1;
                plane.receiveShadow = true;
                scene.add(plane);

                cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
                        new THREE.MeshLambertMaterial({color: 0x00ff00}));
                cube.position.x = 2;
                cube.castShadow = true;
                scene.add(cube);

                var light = new THREE.SpotLight(0xffff00, 1, 100, Math.PI / 6, 25);
                light.position.set(2, 5, 3);
                light.target = cube;
                light.castShadow = true;
                scene.add(light);

                // ambient light
                var ambient = new THREE.AmbientLight(0x666666);
                scene.add(ambient);

                requestAnimationFrame(draw);
            }

            function draw() {
                alpha += 0.01;
                if (alpha > Math.PI * 2) {
                    alpha -= Math.PI * 2;
                }

                cube.position.set(2 * Math.cos(alpha), 0, 2 * Math.sin(alpha));

                renderer.render(scene, camera);

                requestAnimationFrame(draw);
            }
        </script>
    </head>

    <body onload="init()" style="width: 100%; height: 350px; margin: 0;">
        <div id="canvas" width="400px" height="300px"></div>
    </body>
</html>
